<template>
  <div v-if="answerList.length === 0">
    <span v-for="(item, index) in list" :key="index">{{ index + 1 }}: {{ item }}</span>
  </div>
  <div v-else>
    <span v-for="(item, index) in answerList" :key="index" :class="item.classAttr">{{ index + 1 }}: {{ item.cont
      }}</span>
  </div>
</template>

<script>
import Bus from '@/utils/Bus';

export default {
  data() {
    return {
      list: ['未完成', '未完成', '未完成', '未完成', '未完成'],
      answerList: []
    }
  },
  created() {
    Bus.$on('submit', (val1, val2) => {
      if (val1 === val2) {
        this.answerList.push({
          cont: "回答正确",
          classAttr: "right",
        });
      } else if (val1 !== val2) {
        if (val2 === undefined) {
          this.answerList.push({
            cont: "未完成",
            classAttr: "undo",
          });
        } else {
          this.answerList.push({
            cont: "回答错误",
            classAttr: "error",
          });
        }
      }
    },)
  }
};
</script>

<style scoped>
.right {
  color: green;
}

.error {
  color: red;
}

.undo {
  color: #ccc;
}
</style>